import React from 'react';
import './index.css';
import MZActionSheet, { showActionSheet, closeActionSheet } from '../../../../components/MZActionSheet';

import Vote from '../Vote';
import LuckDraw from '../LuckDraw';

import mzsdk from '../../../../utils/mzsdk';
import { Toast } from 'antd-mobile';


/**
 * 右侧的 营销 控制栏
 */

var sign_timer = null;//签到的计时器

export default class MarketingControl extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isShowSign: false,//是否显示签到
            isShowVote: false,//是否显示投票
            isShowLuckDraw: false,//是否显示抽奖

            signInfo: null,//签到详情
            luckDrawInfo: null,//抽奖详情
        }
    }

    componentWillUnmount() {
        if (sign_timer) {
            clearTimeout(sign_timer)
        }
        mzsdk.mzee.off('marketing-control-config-update')
    }

    componentDidMount() {
        if (this.props.ticketInfo) {
            var _this = this;
            let config = this.props.ticketInfo.right;
            for (var i = 0; i < config.length; i++) {
                let item = config[i];
                switch (item.type) {
                    case 'sign':
                        this.setState({
                            signInfo: item,
                        }, () => {
                            _this.fixSignConfig()
                        })
                        continue;
                    case 'vote':
                        this.setState({
                            isShowVote: item.is_open == 1 ? true : false
                        })
                        continue;
                    case 'prize':
                        this.setState({
                            isShowLuckDraw: item.is_open == 1 ? true : false,
                            luckDrawInfo: item.content
                        })
                        continue;
                }
            }
        }

        var _this = this;
        mzsdk.mzee.on('marketing-control-config-update', function (e) {
            switch (e.type) {
                case 'vote':
                    _this.setState({
                        isShowVote: e.value == 1 ? true : false
                    })
                    break;
                case 'sign':
                    _this.setState({
                        isShowSign: e.value == 1 ? true : false
                    })
                    break;
                case 'prize':
                    _this.setState({
                        isShowLuckDraw: e.value == 1 ? true : false
                    })
                    break;
                default:
                    break;
            }
        })
    }

    //更新签到详细内容
    fixSignConfig = () => {
        let { signInfo } = this.state;
        var _this = this;
        this.setState({
            isShowSign: signInfo && signInfo.is_open == 1 ? true : false,
        }, () => {
            _this.processingSignLogic()
        })
    }

    processingSignLogic = () => {
        let { signInfo } = this.state;

        var _this = this;
        if (signInfo.content.is_sign == false && signInfo.content.is_force == '1') {//如果未签到 && 是强制签到
            let signFirstKey = this.getCacheSignKey();
            let isFirst = localStorage.getItem(signFirstKey);
            if (isFirst == '999') {//不是第一次进入本活动
                this.toSignView();
            } else {//第一次进入活动
                sign_timer = setTimeout(() => {
                    _this.toSignView();
                }, signInfo.content.delay_time * 60 * 1000);
            }
        }
    }

    toSignView = () => {
        // 移除延迟弹窗的逻辑
        if (sign_timer) clearTimeout(sign_timer)
        let { signInfo } = this.state
        if (!signInfo) return;
        if (signInfo.content.is_sign == true) return;
        if (signInfo.content.access_url.length <= 0) return;

        // 展示签到页面
        let end_access_url = signInfo.content.access_url + '&callback=' + encodeURIComponent(location.href);
        location.href = end_access_url

        // 记录展示过签到界面了
        let signFirstKey = this.getCacheSignKey()
        localStorage.setItem(signFirstKey, '999')
    }

    getCacheSignKey = () => {
        return mzsdk.opt.userId + this.props.ticketInfo.ticket_id + this.state.signInfo.content.sign_id;
    }

    onClickMarketingMenu = (type) => {
        switch (type) {
            case 'sign':
                let { signInfo } = this.state
                if (!signInfo) return;
                if (signInfo.content.is_sign == true) {
                    Toast.info('已签到', 1.0)
                    return;
                }
                this.toSignView()
                break;
            case 'vote':
                showActionSheet(
                    <MZActionSheet title='投票'>
                        <Vote ticketInfo={this.props.ticketInfo} onClose={() => { closeActionSheet() }} />
                    </MZActionSheet>
                )
                break;
            case 'luckDraw':
                showActionSheet(
                    <MZActionSheet title='抽奖'>
                        <LuckDraw luckDrawInfo={this.state.luckDrawInfo} onClose={() => { closeActionSheet() }} />
                    </MZActionSheet>
                )
                break;
            default:
                break;
        }
    }

    render() {
        let { isShowSign, isShowVote, isShowLuckDraw, signInfo } = this.state;
        return (
            <div className={this.props.className ? ([`${this.props.className}`, `mz-marketing-control-bar-background`].join(' ')) : 'mz-marketing-control-bar-background`'}
            >
                {
                    isShowSign && <div className="mz-marketing-control-bar-item" onClick={this.onClickMarketingMenu.bind(this, 'sign')}>
                        <img className="mz-marketing-control-bar-item-img" src={signInfo && signInfo.content.is_sign == true ? require('../../../../assets/images/float-signed.png') : require('../../../../assets/images/float-sign.png')}></img>
                        <div className={signInfo && signInfo.content.is_sign == true ? 'mz-marketing-control-bar-item-title is-sign' : 'mz-marketing-control-bar-item-title'}>{signInfo && signInfo.content.is_sign == true ? '已签到' : '签到'}</div>
                    </div>
                }
                {
                    isShowVote && <div className="mz-marketing-control-bar-item" onClick={this.onClickMarketingMenu.bind(this, 'vote')}>
                        <img className="mz-marketing-control-bar-item-img" src={require('../../../../assets/images/float-free-vote.png')}></img>
                        <div className="mz-marketing-control-bar-item-title">投票</div>
                    </div>
                }
                {/* {
                    isShowLuckDraw && <div className="mz-marketing-control-bar-item" onClick={this.onClickMarketingMenu.bind(this, 'luckDraw')}>
                        <img className="mz-marketing-control-bar-item-img" src={require('../../../../assets/images/float-draw.png')}></img>
                        <div className="mz-marketing-control-bar-item-title">抽奖</div>
                    </div>
                } */}
            </div>
        )
    }
}
